<template>
  <div>
    <div class="ksd-search-container">
      <el-button type="success" @click="handleOpenAdd"><el-icon>
          <Plus />
        </el-icon>添加</el-button>
      <el-button type="danger"><el-icon :size="20">
          <Edit />
        </el-icon>批量删除</el-button>
      <el-input v-model="pageInfo.keyword" class="w-50" size="small" :input-style="{ 'width': '240px', 'margin': '0 10px' }"
        placeholder="请输入分类名称" :suffix-icon="Search" />
      <el-button type="success" style="margin-left: 40px;"><el-icon>
          <Search />
        </el-icon>搜索</el-button>
    </div>
    <el-table :data="pageInfo.resultList" style="width: 100%">
      <el-table-column label="ID" prop="id" align="center" width="80"></el-table-column>
      <el-table-column label="分类名称" prop="title" align="center"></el-table-column>
      <el-table-column label="状态" width="100">
        <template #default="scope">
          <span v-if="scope.row.status == 1" style="color:green">已发布</span>
          <span v-if="scope.row.status == 0" style="color:red">未发布</span>
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template #default="scope">
          <el-input v-model="scope.row.sorted"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)"><el-icon>
              <Edit />
            </el-icon>编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)"
            icon="Delete">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination" style="display:flex;justify-content: center;">
      <el-pagination :current-page="pageInfo.page" :page-size="pageInfo.pageSize" :page-sizes="[10, 20, 30, 50, 80, 100]"
        layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>


    <!--分类添加和编辑 :close-on-press-escape="false" :close-on-click-modal="false"-->
    <el-dialog v-model="dialogVisible" title="添加分类" width="600px" :before-close="handleClose">
      {{ category }}
      <el-form ref="categoryFormRef" :model="category" :rules="rules" label-width="120px" class="demo-ruleForm"
        :size="formSize" status-icon>
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="category.title" placeholder="请输入分类名称" maxlength="50" />
        </el-form-item>
        <el-form-item label="分类描述" prop="description">
          <el-input v-model="category.description" type="textarea" placeholder="请输入分类描述" maxlength="50" />
        </el-form-item>
        <el-form-item label="分类排序" prop="sorted">
          <el-input v-model="category.sorted" type="number" placeholder="请输入分类排序" maxlength="11" />
        </el-form-item>
        <el-form-item label="发布状态" prop="status">
          <el-radio-group v-model="category.status" class="ml-4">
            <el-radio :label="1">发布</el-radio>
            <el-radio :label="0">未发布</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="删除状态" prop="isDelete">
          <el-radio-group v-model="category.isDelete" class="ml-4">
            <el-radio :label="1">已删除</el-radio>
            <el-radio :label="0">未删除</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit"><el-icon>
              <Check />
            </el-icon>保存</el-button>
          <el-button @click="handleCloseDialog"><el-icon>
              <Close />
            </el-icon>关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import { loadBbsCategoryData, saveBbsCategory, updateBbsCategory, delBbsCategory } from '@/api/bbs.js'
import { onMounted, reactive, ref } from 'vue';
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'
// 这里是添加和编辑-------------------------------------------
const dialogVisible = ref(false)
const formSize = ref('default')
const categoryFormRef = ref(null)
let category = reactive({
  title: "",
  description: "",
  parentId: 0,
  sorted: 0,
  status: 1,
  isDelete: 0
})

const rules = reactive({
  title: [
    { required: true, message: '请输入分类名称', trigger: 'blur' }
  ]
})

// 打开添加
const handleOpenAdd = () => {
  dialogVisible.value = true;
}

// 打开编辑
const handleEdit = (index, row) => {
  category = row;
  // 数据回填form
  dialogVisible.value = true;
}

// 关闭添加和编辑
const handleCloseDialog = () => {
  dialogVisible.value = false;
}

// 交换关闭
const handleClose = () => {
  ElMessageBox.confirm(
    '你确定要离开吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    handleCloseDialog()
  })
}


// 交换关闭
const handleDelete = async (index, row) => {
  var result = await ElMessageBox.confirm('你确定要抛弃我吗？', '提示', { confirmButtonText: '残忍删除', cancelButtonText: '容我想想', type: 'warning', })
  var confirmResult = await ElMessageBox.confirm('你不考虑考虑', '提示', { confirmButtonText: '不考虑了', cancelButtonText: '不删了', type: 'warning', })
  if (result == "comfirm" && confirmResult == "confirm") {
    alert("你要删除的ID是" + row.id)
  }
}

// 保存和编辑
const handleSubmit = async () => {
  await categoryFormRef.value.validate(async (valid, fields) => {
    if (valid) {
      let res;
      let message = "添加成功";
      category.sorted = parseInt(category.sorted);
      if (category.id) {
        message = "编辑成功"
        res = await updateBbsCategory(category);
      } else {
        res = await saveBbsCategory(category);
      }

      if (res.code == 0) {
        // 关闭当前添加窗口
        handleCloseDialog();
        // 重置model对象
        categoryFormRef.value.resetFields();
        categoryFormRef.value.clearValidate();
        // 添加刷新当前页
        handleLoadData();
        ElMessage({
          message,
          type: 'success',
        })
      }
    }
  })
}

// 这里是查询-------------------------------------------------

// 1: 设置请求分页的参数
const pageInfo = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
  resultList: [],
  keyword: ""
})

// 2: 数据加载
const handleLoadData = async () => {
  const res = await loadBbsCategoryData(pageInfo)
  pageInfo.total = res.data.total;
  pageInfo.resultList = res.data.list;
}

// 点击分页改变
const handleCurrentChange = (pageNum) => {
  pageInfo.page = pageNum;
  handleLoadData();
}

// 点击每页显示多少条改变
const handleSizeChange = (pageSize) => {
  pageInfo.pageSize = pageSize;
  handleLoadData();
}

// 3: 生命周期初始化数据加载
onMounted(() => {
  handleLoadData();
})
</script>

<style scoped lang="scss">
.ksd-search-container {
  margin-bottom: 10px;
  background: #f7fbff;
  padding: 6px;
  display: flex;
}
</style>